﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <c:set var="ctx" value="${pageContext.request.contextPath}" />
        <html>

        <head>
            <link rel="stylesheet" href="${ctx}/common/common.css">
            <title>收货记录</title>

            <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
            <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
            <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

            <script src="${ctx}/common/plugins/publicJs/publicJs.js"></script>
            <script src="${ctx}/common/plugins/jquery-1.10.2.min.js"></script>
            <style>
                .layui-body {
                    overflow-y: scroll;
                }

                .laytable-cell-1-att {
                    height: 80px;
                    line-height: 80px;
                }

                .laytable-cell-1-stat {
                    height: 80px;
                    line-height: 80px;
                }

                .layui-carousel>[carousel-item] {
                    height: 90%;
                    width: 80%;
                    margin-left: 10%;
                    margin-top: 20px;
                }
            </style>
        </head>

        <body>
            <!--主体内容层-->
            <div class="layui-fluid">
                <!--通用按钮盒子-->
                <div class="layui-col-md12" style="padding-top: 10px;padding-bottom: 10px">
                    <div style="float: right;" class="layui-btn-group paramBtn">
                        <button id="rollback" type="button" class="layui-btn layui-btn-sm layui-btn-danger">
                            返回
                        </button>
                    </div>
                </div>
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12 layui-col-space15">
                        <table class="layui-table" id="labelReload"
                            lay-data="{ url:'${ctx}/purchaseStatistics/findRecipient?purDetailId=${purDetailId}', page:false,groups:5}"
                            lay-filter="demo">
                            <thead>
                                <tr>
                                    <!--  <th lay-data="{type:'checkbox', fixed: 'left'}"></th> -->
                                    <th lay-data="{field:'code'}">收货单编号</th>
                                    <th lay-data="{field:'creator_name'}">收货人</th>
                                    <th lay-data="{field:'create_time',templet:'#createTime'}">收货日期</th>
                                    <th lay-data="{field:'accep_quantity'}">验收数量</th>
                                    <th lay-data="{field:'ref_quantity'}">验退数量</th>
                                    <th lay-data="{field:'actual_quantity'}">实际数量</th>
                                    <th lay-data="{field:'att',toolbar:'#voucher'}">交易凭证</th>
                                    <th lay-data="{field:'att',toolbar:'#origi'}">产地证明</th>
                                    <th lay-data="{field:'right',toolbar:'#barDemoS',width:90}">溯源信息</th>
                                    <th lay-data="{field:'stat',toolbar:'#barDemoJ',width:90}">检验报告</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            <script type="text/html" id="barDemoS">
                <a class="layui-btn layui-btn-sm" lay-event="viewSuyuan">查看</a>
            </script>
            <script type="text/html" id="barDemoJ">
                {{#  if(d.stat == 1){ }}
                <a style="margin-top: 25px;" class="layui-btn layui-btn-sm" lay-event="viewJianyan">查看</a>
                {{#  } }}
                {{#  if(d.stat == 2){ }}
                <img style="width: 60px;height: 60px;margin-top: 10px;" src="${ctx}/common/plugins/images/tuih.png" class="layui-upload-img">
                {{#  } }}
            </script>
            <script id="createTime" type="text/html">
                {{# return layui.getDate(d.create_time, 'yyyy-MM-dd');}}
            </script>
            <script id="voucher" type="text/html">
                {{#  layui.each(d.att, function(index, item){ }}
                    {{#  if(item.type == 1){ }}
                        <img style="width: 80px;height: 80px;" src="${ctx}{{ item.att_timg }}" class="layui-upload-img" onclick="showInspectionReport('{{d.id}}')">
                    {{#  } }}
                {{#  }); }}
                <div class="layui-carousel imgs" id="img{{d.id}}" style="width: 89%;">
                    <div style="color: #0e9aef;float: right;cursor: pointer" onclick="closeInspectionReport('{{d.id}}')">[关闭]</div>
                        <div carousel-item >
                {{#  layui.each(d.att, function(index, item){ }}
                    {{#  if(item.type == 1){ }}
                            <img src="${ctx}{{ item.att_timg }}" style="max-width: 100%;"/>
                    {{#  } }}
                {{#  }); }}
                    </div>
                </div>
                {{#  if(d.att.length === 0){ }}
                    无数据
                {{#  } }}
            </script>
            <script id="origi" type="text/html">
                {{#  layui.each(d.att, function(index, item){ }}
                    {{#  if(item.type == 2){ }}
                            <img style="width: 80px;height: 80px;" src="${ctx}{{ item.att_timg }}" class="layui-upload-img" onclick="oshowInspectionReport('{{d.id}}')">
                    {{#  } }}
                {{#  }); }}
                <div class="layui-carousel imgs" id="o_img{{d.id}}" style="width: 89%;">
                    <div style="color: #0e9aef;float: right;cursor: pointer" onclick="ocloseInspectionReport('{{d.id}}')">[关闭]</div>
                        <div carousel-item >
                {{#  layui.each(d.att, function(index, item){ }}
                    {{#  if(item.type == 2){ }}
                            <img src="${ctx}{{ item.att_timg }}" style="max-width: 100%;"/>
                    {{#  } }}
                {{#  }); }}
                    </div>
                </div>
                {{#  if(d.att.length === 0){ }}
                    无数据
                {{#  } }}
            </script>
        </body>
        <script>
            layui.use(['tree', 'layer', 'table'], function () {
                var $ = layui.$;
                var loading = layer.msg("数据加载中...");
                var table = layui.table;
                table.render({
                    done: function () {
                        layer.close(loading);
                    }
                })
                table.on('tool(demo)', function (obj) {
                    var data = obj.data;
                    if (obj.event == 'viewJianyan') {
                        window.location.href = '${ctx}/purchaseStatistics/toInspection?recipientId=' + obj.data.id
                    } else if (obj.event == 'viewSuyuan') {
                        layer.open({
                            type: 2,
                            skin: 'layui-layer-rim', //加上边框
                            area: ['50%', '80%'], //宽高
                            content: '${ctx}/purchaseStatistics/toTraceGather?recipientId=' + obj.data.id
                        });
                    }
                });
                $('.demoTable .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
                //给按钮绑定active中的方法
                $(".paramBtn .layui-btn").on("click", function () {
                    var type = $(this).data('type');
                    //查看是active这个json中是否有type这个方法，如果有调用，如果没有不知心；
                    active[type] ? active[type].call() : '';
                })
            });
            var ins;
            function showInspectionReport(id) {
                var imgId = "img" + id;
                layui.use('carousel', function () {
                    var carousel = layui.carousel;
                    //建造实例
                    var ins = carousel.render({
                        elem: '#' + imgId
                        , full: true
                        , arrow: 'always' //始终显示箭头
                    });
                    $('#' + imgId).show()
                });
            }
            function closeInspectionReport(id) {
                var imgId = "img" + id;
                $('#' + imgId).hide();
            }
            var oins;
            function oshowInspectionReport(id) {
                var imgId = "o_img" + id;
                layui.use('carousel', function () {
                    var carousel = layui.carousel;
                    //建造实例
                    var oins = carousel.render({
                        elem: '#' + imgId
                        , full: true
                        , arrow: 'always' //始终显示箭头
                    });
                    $('#' + imgId).show()
                });
            }
            function ocloseInspectionReport(id) {
                var imgId = "o_img" + id;
                $('#' + imgId).hide();
            }
            document.getElementById("rollback").addEventListener("click", function () {
                window.history.back();
            })
        </script>

        </html>